<template>
  <div class="AdvisoryDetails">
    <div class="header_AdvisoryDetails">
      <div class="centre">
        <img src="@/assets/img/huize_logo.png" alt />
      </div>
    </div>
    <div class="content_AdvisoryDetails">
      <div class="content centre">
        <div class="content_left">
          <div class="content_header">
            <router-link to="/film" tag="span">首页</router-link>>
            <router-link :to="{ name: '/SchoolDeati/School', params: { userId: this.$route.query.schoolID}}" tag="span">学校详情</router-link>>
            
            招生简介
          </div>
          <div class="contentDetails">
            <h3>{{studentDeatilbox.schoolName}}</h3>
           
            <div class="content_Details" v-html="Classroom"></div>
          </div>
        </div>
        <div class="content_right">
          <div class="schoolDeatil_right">
          <div class="General_rules">
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;招生简章</h3>

            <div class="list">
              <ul
                style=" width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;padding-right:50px;"
              >
                <li v-for="(list , index) in General" :key="index" @click="gogetstudent(list)">
                  <p>{{list.title}}</p>
                </li>

                <br />
                <br />
                <br />
              </ul>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AdvisoryDetails",
  data() {
    return {
      Contents: "",
      studentDeatilbox:[],
      General:[],
      Classroom:[]
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
         console.log(this.$route.query.year);
          console.log(this.$route.query.schoolID);
         this.getstudentDeatil()
         this.getGeneral();
    });
   
  },

  methods: {
    gogetstudent(list){
      // console.log(list.year)
    
      this.$router.push({
        path: "/GetStudent",
        query: { year: list.year,
                  schoolID:this.$route.query.schoolID
           }
      });
    },
    getstudentDeatil(){
        this.$ajax({
        method: "post",
        url:  "/api/recruitPlan/recruitConstitution?yearId=" +
        this.$route.query.year +
        "&" +
        "schoolId=" +
        this.$route.query.schoolID,
        success: res => {''
          // console.log(11111)
          if (res.data.code == 0) {
           this.studentDeatilbox=res.data.data
          let Contents = res.data.data.content.replace(
              /\n/g,
              "<p><br><p>"
            );
            //  console.log(Contents);
            this.Classroom = Contents;
        console.log(this.studentDeatilbox)
          } else {
            
          }
        }
      });
    },

  getGeneral() {
      this.$ajax({
        method: "post",
        url:
          "/api/recruitPlan/recruitConstitutionList?schoolId=" + this.$route.query.schoolID,
        success: res => {
          if (res.data.code == 0) {
            // alert(res.data.data.data)
            this.General = res.data.data;
          } 
        }
      });
    }
    //   created() {
    //   this.getDeatil();

    // }
  },
  watch:{
    $route(to, from){
       this.$ajax({
        method: "post",
        url:  "/api/recruitPlan/recruitConstitution?yearId=" +
        this.$route.query.year +
        "&" +
        "schoolId=" +
        this.$route.query.schoolID,
        success: res => {''
          // console.log(11111)
          if (res.data.code == 0) {
           this.studentDeatilbox=res.data.data
          let Contents = this.studentDeatilbox.content.replace(
              /\n/g,
              "<p><br><p>"
            );
            //  console.log(Contents);
            this.Classroom = Contents;
          } else {
            
          }
        }
      });
    }
  }
};
</script>
<style lang="scss">
.AdvisoryDetails {
  .header_AdvisoryDetails {
    img {
      height: 36px;
      margin: 18px 0;
    }
  }
  .content_AdvisoryDetails {
    background: #f6f6f6;
    padding-bottom: 120px;
    .content {
      display: flex;
      justify-content: space-between;
      .content_left {
        overflow: hidden;
        .content_header {
          color: #757575;
          margin-top: 26px;
          span {
            cursor: pointer;
          }
        }
        .contentDetails {
          width: 784px;
          background: #fff;
          border-radius: 10px;
          padding: 0 66px;
          margin: 0 auto;
          margin-top: 20px;
          padding-bottom: 40px;
          min-height: 1060px;
          overflow-y: auto;

          h3 {
            padding-top: 30px;
            font-size: 22px;
            color: #515151;
            line-height: 56px;
          }
          .item_tyle {
            color: #757575;
            padding-bottom: 33px;
            span {
              font-size: 12px;
              padding-right: 36px;
            }
          }
          .content_Details {
            color: #414141;
            font-size: 16px;
            line-height: 20px;
            text-indent: 2em;
            line-height: 25px;
            img {
              width: 100%;
              border-radius: 10px;
              display: block;
              margin: 26px 0;
            }
          }
        }
      }
      .content_right {
        width: 242px;
        height: 300px;
        margin-top: 46px;
        border-radius: 10px;
        background: #ffffff;
        .schoolDeatil_right {
        width: 240px;
        .General_rules {
          padding: 0 10px;
          background: #ffffff;
          width: 240px;
          height: 340px;
          border-radius: 10px;
          h3 {
            color: #414141;
            display: block;
            padding-top: 34px;
            padding-bottom: 14px;
            font-size: 20px;
            border-bottom: 12px #f0f0f0 solid;
          }
          .list {
            height: 260px;
            overflow: hidden;

            ul {
              width: 100%;
              padding-bottom: 20px;
              li {
                cursor: pointer;
                padding: 20px 0;
                width: 100%;
                display: block;
                border-bottom: 8px #f0f0f0 solid;
                font-size: 12px;
                color: #2c2c2c;
                position: relative;
                p {
                  display: block;
                  width: 88%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              li:hover > p {
                width: 88%;
                display: block;
                overflow: visible;
                line-height: 20px;
                white-space: normal;
                z-index: 10;
              }
            }
          }
        }
        .major {
          margin-top: 34px;
          padding: 0 10px;
          background: #ffffff;
          width: 240px;
          height: 340px;
          border-radius: 10px;
          h3 {
            color: #414141;
            display: block;
            padding-top: 34px;
            padding-bottom: 14px;
            font-size: 20px;
            border-bottom: 12px #f0f0f0 solid;
          }
          .list {
            height: 260px;
            overflow: hidden;

            ul {
              width: 100%;
              padding-bottom: 20px;
              li {
                padding: 20px 0;
                width: 100%;
                display: block;
                border-bottom: 8px #f0f0f0 solid;
                font-size: 12px;
                color: #2c2c2c;
                p {
                  width: 88%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
      }
    }
  }
}
</style>